<template>
	<view class="content">
		<view class="top">
			<!-- #ifndef MP-TOUTIAO -->
			<view class="navbar" :style="{ height: navBarHeight + 'px' }"><text>人才直聘</text></view>
			<!-- #endif -->
			<view class="mp-search">
				<view class="location" @click="toSelectCity">
					<text class="yzb yzb-location"></text>
					<text class="city ellipsis-oneline">{{ location.city }}</text>
					<text class="yzb yzb-xiangxia"></text>
				</view>
				<view class="mp-search-input" @click="search">
					<text class="yzb yzb-search" style="font-size: 36upx;margin-right: 15upx;"></text>
					<text>搜索职位或人才</text>
				</view>
				<view class="kefu" @click="toRobot">
					<!-- <text class="yzb yzb-custom-service"></text> -->
					<image src="../../static/kp/ai.png"></image>
				</view>
			</view>
		</view>
		<view :style="{ 'margin-top': topHeight + 'px' }">
			<!-- <view class="notice">
				<yzb-notice theme="primary" :list="noticeList" theKey="title" :showIcon="true" :showMore="true"
					@goItem="goItem" @goMore="goMore"></yzb-notice>
			</view> -->
			<m-swiper :list="banner" :previousMargin="30" :nextMargin="30"></m-swiper>
			<view v-if="hasLogin == false || (ifPermission('index-type'))" class="grid">
				<yzb-grid :columnNum="5" :data="grid" show-border="false" @click="handleClickGrid"></yzb-grid>
			</view>
			<view class="notice">
				<yzb-notice theme="primary" :list="noticeList" theKey="title" :showIcon="true" :showMore="true"
					@goItem="goItem" @goMore="goMore"></yzb-notice>
			</view>
			<view class="post" v-if="hasLogin == false || (ifPermission('index-post'))">
				<view class="title"><text class="name">热门职位</text></view>
				<view class="post-list">
					<view v-for="(item, index) in postList" :key="index" @click="toPost(item)">
						<text class="post-item" :class="index % 4 != 0 ? 'post-item-left' : ''">{{ item.name }}</text>
					</view>
				</view>
				<view class="all" @click="toAllPost">
					<text class="all-text">查看全部职位</text>
					<text class="yzb yzb-next post-next"></text>
				</view>
			</view>
			<template v-if="hasLogin == false || (ifPermission('index-post'))">
				<view class="title">
					<view class="title-left">
						<view :class="selectedIndex==0?'title-item-selected':'title-item'" @click="selectTitle(0)">
							<text class="name">附近职位</text>
							<image src="../../static/kp/underline.png"></image>
						</view>
						<!-- <view :class="selectedIndex==1?'title-item-selected':'title-item'" @click="selectTitle(1)">
							<text class="name">最新</text>
							<image src="../../static/kp/underline.png"></image>
						</view> -->
					</view>
					<!-- <text>筛选</text> -->
				</view>
				<yzb-position :positions="list" @click="positionDetail"></yzb-position>
			</template>
			<template v-if="ifPermission('index-resume')">
				<view class="title"><text class="name">人才列表</text></view>
				<yzb-resume :list="list" @click="resumeDetail"></yzb-resume>
			</template>
			<view class="load-more-box">
				<uni-load-more v-if="status == '请求中'" status="正在加载..." :showIcon="true"></uni-load-more>
				<uni-load-more v-if="status == '没有更多'" status="没有更多了" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '暂无数据'" status="暂无数据" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '请求失败'" status="加载失败，点我重试" :showIcon="false"
					@click="reLoad"></uni-load-more>
			</view>
		</view>
		<!-- <page-tabpars></page-tabpars> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import mSwiper from '@/components/m-swiper/m-swiper.vue';
	import yzbPosition from '@/components/yzb/yzb-position.vue';
	import yzbResume from '@/components/yzb/yzb-resume.vue';
	import IMService from '@/lib/imservice';
	import amap from '@/common/amap-wx.js';
	export default {
		components: {
			mSwiper,
			yzbPosition,
			yzbResume,
		},
		computed: {
			...mapState(['userInfo', 'permission']),
			...mapGetters(['hasLogin'])
		},
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
				topHeight: 0,

				status: '',
				query: {
					page: 1,
					limit: 10,
					type: '',
				},
				banner: [],
				grid: [],
				ka: [],
				adList: [],
				postList: [],
				JobExpectList: [],
				list: [],
				selectExpected: null,

				key: '102dcab15e743584f73d383dea7530e7', //高德地图key
				location: {
					city: '未定位'
				}, //定位信息

				loadStatus: 'loading', //loading、fail、success
				noticeList: [],
				selectedIndex: 0,

				unreadTotal: 0,
				noticeCount: 0,
			};
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			//#ifndef MP-WEIXIN
			this.navBarHeight = 44;
			this.topHeight = this.navBarHeight + uni.upx2px(80);
			//#endif
			//#ifdef MP-WEIXIN
			this.navBarHeight = uni.getMenuButtonBoundingClientRect().bottom;
			this.topHeight = this.navBarHeight + uni.upx2px(80);
			//#endif
			//#ifdef MP-TOUTIAO
			this.navBarHeight = 0;
			this.topHeight = this.navBarHeight + uni.upx2px(80);
			//#endif
		},
		async onLoad(query) {
			console.log("onload===", query);
			// #ifdef H5
			// H5环境推广码注册
			if (query.referrer && query.referrer != " " && !this.hasLogin) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.loginPwd,
					query: query
				})
				return;
			}
			//  #endif
			this.getBanners();
			this.getTypeList();
			this.getNoticeList();
			let loc = this.$db.get('location');
			console.log('loc===', loc);
			if (loc) {
				this.location = loc;
			}
			//#ifdef MP
			this.locationAuth();
			//#endif
			//#ifndef MP
			this.getPosition();
			// this.getLocation();
			//#endif
			// this.initHotPostData();
			this.getPostPageList();
			await this.$AppEntryController.main(query);
		},

		onShow() {
			this.listenCitySelect();
			if (this.hasLogin && this.userInfo.memberRole == 1) {
				this.roleChange();
			}
			this.getDatasByLoc();
			this.initChat();
		},

		onUnload() {
			uni.$off('city');
		},

		onPullDownRefresh() {
			this.getDatasByLoc('refresh', true);
		},

		onReachBottom() {
			this.getDatasByLoc('add');
		},
		methods: {

			//是否有指定的模块权限
			ifPermission(name) {
				if (!this.hasLogin || Array.isArray(this.permission) == false) {
					return false;
				}
				for (let item of this.permission) {
					if (item.path == "/pages/index/index") {
						let components = item.children;
						for (let cp of components) {
							if (cp.component == name) {
								return true;
							}
						}
					}
				}
				return false;
			},

			//需要位置信息的
			getDatasByLoc(type = 'refresh', pulldown = false) {
				if (this.location.pcitycode) {
					this.query.latitude = this.location.latitude;
					this.query.longitude = this.location.longitude;
					this.query.pcitycode = this.location.pcitycode;
					if (!this.hasLogin || this.ifPermission("index-post")) {
						this.getPositionList(type, pulldown);
					} else if (this.ifPermission("index-resume")) {
						this.getResumeList(type, pulldown);
					}
				} else {
					uni.hideLoading();
					console.log('位置不能为空哦');
				}
			},

			async roleChange() {
				//用户未绑定企业，角色切换
				if (this.userInfo.companyId == 0) {
					let res = await this.$apis.switchRole({
						role: 0
					});
					this.getUserInfo();
				}
			},

			// 获取用户信息
			async getUserInfo() {
				let userInfo = await this.$apis.getUserInfo();
				if (userInfo == true) {
					uni.clearStorageSync();
					this.$store.commit('SET_LOGOUT');
					if (this.goEasy.getConnectionStatus() === 'connected') {
						console.log('do  disconnect');
						getApp().globalData.imService.disconnect();
					}
					return;
				}
				this.$store.commit('SET_USERINFO', userInfo);
				this.getDatasByLoc();
			},

			async initHotPostData() {
				let postList = await this.$apis.getHotPostList();
				console.log('postList==', postList);
				this.postList = postList || [];
			},

			initChat() {
				let that = this;
				//注册
				if (this.hasLogin) {
					console.log('this.goEasy.getConnectionStatus()==' + this.goEasy.getConnectionStatus());
					if (this.goEasy.getConnectionStatus() === 'disconnected') {
						getApp().globalData.imService = new IMService(this.goEasy, this.GoEasy);
						getApp().globalData.imService.connect(this.userInfo);
					} else {
						//加载会话列表
						this.goEasy.im.latestConversations({
							onSuccess: function(result) {
								let content = result.content;
								console.log('最新会话列表', content);
								that.unreadTotal = content.unreadTotal;
								that.setUnreadAmount();
							},
							onFailed: function(error) {
								//获取失败
								console.log('失败获取最新会话列表, code:' + error.code + ' content:' + error.content);
							}
						});
					}
					this.getUnReadCount();
				}
			},

			async getUnReadCount() {
				let param = {
					userId: this.userInfo.id
				}
				let res = await this.$apis.getUnReadCount(param);
				if (res != true) {
					this.noticeCount = res;
				} else {
					this.noticeCount = 0;
				}
				this.setUnreadAmount();
				console.log('getUnReadCount===', res);
			},

			setUnreadAmount() {
				let total = this.unreadTotal + this.noticeCount;
				if (total > 0) {
					this.$store.commit('SET_TABBAR_INFO', {
						name: "chat",
						info: total.toString()
					});
				} else {
					this.$store.commit('SET_TABBAR_INFO', {
						name: "chat",
						info: 0
					});
				}
			},

			async getPostPageList() {
				let param = {
					pageNo: 1,
					pageSize: 12,
					ifHot: 1
				};
				let res = await this.$apis.getPostPageList(param);
				if (res) {
					this.postList = res.records;
				}
			},

			async getBanners() {
				let data = await this.$apis.getBanners({
					apId: 1
				});
				console.log("data===", data)
				if (data) {
					this.banner = data;
				}
			},

			async getTypeList() {
				let data = await this.$apis.getTypeList();
				console.log("getTypeList===", data)
				if (data) {
					this.grid = data;
				}
			},

			async getJobExpectList() {
				let data = await this.$apis.getJobExpectList();
				if (data) {
					for (let i in data) {
						data[i].selected = false;
						if (i == 0) {
							data[i].selected = true;
						}
					}
					this.JobExpectList = data;
					this.selectExpected = this.JobExpectList[0];
					this.getPositionList();
				}
			},

			async getPositionList(type = 'refresh', pulldown = false) {
				this.status = '请求中';
				if (type == 'refresh') {
					this.query.page = 1;
				} else {
					this.query.page++;
				}
				// if (!this.hasLogin && this.query.page == 4) {
				// 	this.query.page--;
				// 	uni.showModal({
				// 		title: "温馨提示",
				// 		content: '注册人才直聘，将无限制浏览',
				// 		confirmText: '去注册',
				// 		cancelText: '取消',
				// 		success: res => {
				// 			console.log(res);
				// 			if (res.confirm) {
				// 				this.$mRouter.push({
				// 					//#ifdef MP-WEIXIN
				// 					route: this.$mRoutesConfig.login,
				// 					//#endif
				// 					//#ifdef MP-TOUTIAO 
				// 					route: this.$mRoutesConfig.login,
				// 					//#endif
				// 					//#ifdef H5
				// 					route: this.$mRoutesConfig.loginPwd,
				// 					//#endif
				// 					//#ifdef APP-PLUS
				// 					route: this.$mRoutesConfig.loginPwd,
				// 					//#endif
				// 					query: {
				// 						id: 1
				// 					}
				// 				});
				// 			} else {
				// 				console.log('取消');
				// 			}
				// 		}
				// 	});
				// 	return;
				// }
				let res = await this.$apis.getPositionList(this.query);
				uni.hideLoading();
				if (res) {
					if (type == 'refresh') {
						this.list = [];
					}
					if (pulldown) {
						uni.stopPullDownRefresh();
					}
					let data = res.records;
					for (let i in data) {
						if (data[i].skill) {
							data[i].skill = data[i].skill.split(',');
						}
					}
					this.list = this.list.concat(data || []);
					this.changeStatus(res);
				}
			},

			async getCompanyPositionList() {
				let param = {
					page: 1,
					limit: 30
				};
				let res = await this.$apis.getCompanyPositionList(param);
				if (res) {
					let data = res.records;
					for (let i in data) {
						data[i].selected = false;
						if (i == 0) {
							data[i].selected = true;
						}
					}
					this.JobExpectList = data;
					this.selectExpected = this.JobExpectList[0];
					this.getResumeList();
				}
			},

			async getResumeList(type = 'refresh', pulldown = false) {
				this.status = '请求中';
				if (type == 'refresh') {
					this.query.page = 1;
				} else {
					this.query.page++;
				}
				let res = await this.$apis.getResumeList(this.query);
				uni.hideLoading();
				if (res) {
					if (type == 'refresh') {
						this.list = [];
					}
					if (pulldown) {
						uni.stopPullDownRefresh();
					}
					let data = res.records;
					this.list = this.list.concat(data || []);
					this.changeStatus(res);
				}
			},

			// 修改请求状态
			changeStatus(data) {
				console.log("changeStatus===", data);
				if (this.list.length === 0) {
					this.status = '暂无数据';
				} else if (this.query.page >= Math.ceil(data.total / this.query.limit)) {
					this.status = '没有更多';
				} else {
					this.status = '请求更多';
				}
			},

			handleClickGrid(o) {
				console.log("===handleClickGrid===", o);
				if (this.grid[o.index].openUrl == "/pages/train/train" || this.grid[o.index].openUrl ==
					"/pages/plan/plan") {
					uni.switchTab({
						url: this.grid[o.index].openUrl
					})
				} else {
					uni.navigateTo({
						url: this.grid[o.index].openUrl
					})
				}
				// this.$mRouter.push({
				// 	route: this.grid[o.index].openUrl,
				// 	query: {
				// 		type: this.grid[o.index].type,
				// 		text: this.grid[o.index].text
				// 	}
				// });
			},

			selectExpect(index) {
				for (let i in this.JobExpectList) {
					if (index == i) {
						this.JobExpectList[i].selected = true;
					} else {
						this.JobExpectList[i].selected = false;
					}
				}
				this.selectExpected = this.JobExpectList[index];
				this.getDatasByLoc();
			},

			positionDetail(item) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.positionDetail,
					query: {
						id: item.id
					}
				});
			},

			resumeDetail(item) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.resumeDetail,
					query: {
						id: item.id
					}
				});
			},

			toAllPost() {
				uni.switchTab({
					url: '/pages/type/type'
				});
			},
			toPost(item) {
				//跳转到岗位筛选页面
				getApp().globalData.postId = item.id;
				uni.switchTab({
					url: '/pages/type/type'
				});
			},

			search() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.search
				});
			},

			toSelectCity() {
				console.log('toSelectCity');
				if (this.location.city == '未定位') {
					//#ifdef MP-WEIXIN
					this.locationAuth();
					//#endif
					//#ifdef H5
					this.getPosition();
					//#endif
					//#ifdef MP-TOUTIAO
					this.locationAuth();
					//#endif
				} else {
					uni.navigateTo({
						url: '/pages/common/selectCity'
					});
				}
			},

			toRobot() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.robot
				});
			},

			/**
			 * 位置授权
			 */
			locationAuth() {
				let that = this;
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							console.log('userLocation位置功能已授权');
							that.getLocation();
							// 如果已授权,直接获取对应参数
						} else if (!res.authSetting['scope.userLocation']) {
							// 说明此时要获取的位置功能尚未授权,
							// 则设置进入页面时主动弹出，直接授权
							uni.authorize({
								scope: 'scope.userLocation',
								success(res) {
									// 授权成功
									console.log(res);
									that.getLocation();
									// 成功后获取对应的位置参数
								},
								fail() {
									console.log('位置授权失败');
									uni.showModal({
										content: '检测到您没打开获取信息功能权限，是否去设置打开？',
										confirmText: '确认',
										cancelText: '取消',
										success: res => {
											console.log(res);
											if (res.confirm) {
												uni.openSetting({
													success: res => {
														console.log('res', res);
														that.getLocation();
													},
													fail: err => {
														console.log(err);
													}
												});
											} else {
												console.log('取消');
											}
										}
									});
								}
							});
						}
					},
					fail() {
						console.log('获取授权信息授权失败');
					}
				});
			},

			getLocation() {
				// uni.showLoading({
				// 	title: '加载中···'
				// })
				//高德地图插件
				this.myAmapFun = new amap.AMapWX({
					key: this.key
				});
				let that = this;
				this.myAmapFun.getRegeo({
					success: function(data) {
						//成功回调
						console.log('定位信息：', data);
						let mlocation = {
							latitude: data[0].latitude,
							longitude: data[0].longitude,
							pcity: data[0].regeocodeData.addressComponent.city,
							city: data[0].regeocodeData.addressComponent.district,
							citycode: data[0].regeocodeData.addressComponent.adcode + '000000',
							pcitycode: data[0].regeocodeData.addressComponent.adcode.substr(0, 4) +
								'00000000'
						};
						that.location = mlocation;
						getApp().globalData.location = mlocation;
						getApp().globalData.currentLocation = JSON.parse(JSON.stringify(mlocation));
						//保存到本地
						that.$db.set('location', mlocation);
						that.getDatasByLoc();
					},
					fail: function(info) {
						//失败回调
						console.log(info);
						// uni.hideLoading();
					}
				});
			},

			//获取定位信息
			getPosition() {
				console.log("=========获取定位信息========getPosition================")
				const that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(lb) {
						console.log('位置信息', lb);
						console.log('当前位置的经度：' + lb.longitude);
						console.log('当前位置的纬度：' + lb.latitude);
						that.latitude = lb.latitude;
						that.longitude = lb.longitude;
						console.log(lb.longitude, lb.latitude);
						let key = '845d7a0716db36b612ce8e13369c4e09'; //高德地图key
						uni.request({
							// url: 'gaode/regeo?output=json&location=' + lb.longitude + ',' + lb.latitude + '&key=' + key + '&radius=1000&extensions=all',
							url: '/qq?output=json&location=' + lb.latitude + ',' + lb.longitude +
								'&key=TZCBZ-R333W-T27RS-OX3SB-RRJET-AWFVF&radius=1000&get_poi=1',
							data: {},
							header: {
								'Content-Type': 'application/json',
								'Access-Control-Allow-Origin': '*'
							},
							success: function(res) {
								console.log('高德地图API接口返回信息', res);
								// that.area = res.data.regeocode.addressComponent.city;
								console.log('定位信息：', res);
								let mlocation = {
									latitude: res.data.result.ad_info.location.latitude,
									longitude: res.data.result.location.longitude,
									pcity: res.data.result.ad_info.city,
									city: res.data.result.ad_info.district,
									citycode: res.data.result.ad_info.adcode + '000000',
									pcitycode: res.data.result.ad_info.adcode.substr(0, 4) +
										'00000000'
								};
								that.location = mlocation;
								getApp().globalData.location = mlocation;
								getApp().globalData.currentLocation = JSON.parse(JSON.stringify(
									mlocation));
								//保存到本地
								that.$db.set('location', mlocation);
								that.getDatasByLoc();
							}
						});
					},
					fail: function(error) {
						console.log('===getLocation====error=========', error);
					}
				});
			},

			listenCitySelect() {
				let that = this;
				uni.$on('city', res => {
					console.log('city', res);
					getApp().globalData.location.city = res.city;
					getApp().globalData.location.citycode = res.code;
					if (res.level == 2) {
						getApp().globalData.location.pcity = res.city;
						getApp().globalData.location.pcitycode = res.code;
					} else {
						getApp().globalData.location.pcity = res.pcity;
						getApp().globalData.location.pcitycode = res.pcode;
					}
					this.location = getApp().globalData.location;
					this.$db.set('location', this.location);
					this.getDatasByLoc();
				});
			},

			async getNoticeList() {
				let param = {
					pageNo: 1,
					pageSize: 5
				};
				let res = await this.$apis.getNoticeList(param);
				console.log('getNoticeList===', res);
				if (res.records.length > 0) {
					this.noticeList = res.records;
					console.log('noticeList===', this.noticeList);
				}
			},

			goItem(item) {
				console.log('goItem', item);
				this.$mRouter.push({
					route: this.$mRoutesConfig.noticeDetail,
					query: {
						id: item.id
					}
				});
			},

			goMore(item) {
				console.log('goMore', item);
				this.$mRouter.push({
					route: this.$mRoutesConfig.notices
				});
			},

			selectTitle(index) {
				this.selectedIndex = index;
				if (index == 1) {
					this.query.type = 1
				} else {
					this.query.type = '';
				}
				this.getPositionList('refresh', false);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.top {
		position: fixed;
		top: 0;
		z-index: 100;
		width: 100%;
		background-color: $main-color;
		// background-image: linear-gradient(#12ae85, #51EFCC);
		font-size: 0;
	}

	.navbar {
		height: 100upx;
		display: flex;
		align-items: flex-end;
		justify-content: center;

		text {
			color: #ffffff;
			margin-left: 20upx;
			font-size: 36upx;
		}
	}

	// 搜索框
	.mp-search {
		// background: $main-color;
		height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 20upx;
		box-sizing: border-box;

		.location {
			display: flex;
			flex-direction: row;
			align-items: center;
			// width: 30%;
			min-width: 25%;
			color: $uni-bg-color-grey;
			padding: 0 10upx 0 0;
			font-weight: bold;

			.city {
				// width: 100upx;
			}

			.yzb-location {
				margin-right: 15upx;
				color: $uni-bg-color-grey;
			}

			.yzb-xiangxia {
				color: $uni-bg-color-grey;
				margin-left: 5upx;
				font-size: $uni-font-size-sm;
			}
		}

		.mp-search-input {
			font-size: 28upx;
			background: #f5f5f5;
			// background: #FFFFFF;
			height: 60upx;
			width: 70%;
			border-radius: 50upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #909399;
		}

		.kefu {
			padding: 0 10upx;
			margin-left: 20upx;
			align-items: center;
			display: flex;

			text {
				font-size: 38upx;
				color: #ffffff;
			}

			image {
				width: 50upx;
				height: 50upx;
			}
		}
	}

	.notice {
		width: 100%;
		// padding: 0 3%;
		padding-top: 10upx;
		padding-bottom: 10upx;
		box-sizing: border-box;
		// padding: 20upx 0;
		background-color: #ECF5FF;
		// background-image: linear-gradient(#51EFCC, #ffffff);
	}

	.grid {
		padding: 20upx 0;
		background-color: #FFFFFF;
	}

	.post {
		// margin-top: 10upx;
		background-color: #ffffff;
		border-bottom: 20upx solid $border-color-light;
		// border-top: 20upx solid $border-color-light;
		padding-bottom: 20upx;

		.title {
			// font-weight: bold;
			// font-size: $uni-font-size-lg;
			border-bottom: 1rpx solid $border-color-base;
		}
		
		.name{
			font-weight: bold;
			font-size: 34upx;
			color: #000;
		}

		.post-list {
			overflow: hidden;
			white-space: nowrap;
			flex-wrap: wrap;
			width: 96%;
			padding: 2%;
		}

		.post-item {
			// background-color: #EEF2FE;
			border: 1upx solid $border-color-base;
			font-size: 28upx;
			float: left;
			width: 20%;
			padding: 10upx 1%;
			border-radius: 8upx;
			margin-top: 20upx;
			text-align: center;

			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.post-item-left {
			margin-left: 3%;
		}

		.all {
			margin-top: 10upx;
			display: flex;
			justify-content: center;
			align-items: center;

			.all-text {
				color: $main-color;
				font-weight: bold;
			}

			.post-next {
				font-size: $font-size-34;
				color: $main-color;
				margin-left: 5upx;
			}
		}
	}

	.title {
		background-color: #ffffff;
		// border-top: 15upx solid $border-color-light;
		padding: 30upx 20upx;
		border-bottom: 1upx solid $border-color-base;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		.name{
			font-weight: bold;
			font-size: 34upx;
			color: #000;
		}

		.title-left {
			display: flex;
			flex-direction: row;
			.title-item-selected {
				margin-right: 30upx;
				display: flex;
				flex-direction: column;

				text {
					font-weight: bold;
					font-size: 34upx;
					color: #000;
				}

				image {
					width: 50upx;
					height: 10upx;
				}
			}

			.title-item {
				margin-right: 30upx;
				display: flex;
				flex-direction: column;

				text {
					font-size: 32upx;
					color: #666;
				}

				image {
					width: 0;
					height: 0;
				}
			}

		}
	}

	.expect {
		padding: 25upx 2%;
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		background-color: $bgcolor_white;
		border-bottom: 1upx solid $border-color-base;

		.items {
			width: 85%;
			padding: 0 3%;
			flex-wrap: wrap;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			white-space: nowrap;
			align-items: center;

			text {
				padding: 0 10upx;
				font-size: $uni-font-size-lg;
				color: $font-color-base;
			}

			.selected {
				font-weight: bold;
				color: $font-color-000;
				font-size: $font-size-34;
			}
		}

		.expect-icon {
			size: $uni-font-size-lg;
			color: $font-color-gray;
			margin-right: 10upx;
		}
	}

	.load-more-box {
		// height: 120upx;
	}
</style>